<style>
    #rule-list {
        height: calc(100vh - 280px);
    }

    .rule-item {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        padding: 10px 8px;
        border: 1px solid rgba(0, 0, 0, .15);
        border-radius: 4px;
        color: #000;
        font-size: 14px;
        margin-bottom: 8px;
        white-space: nowrap;
        overflow: hidden;
        cursor: pointer;
        font-size: 12px;
        font-weight: 600
    }

    .rule-item.selected {
        /* background: var(--primary-hover-color); */
        border: 1px solid var(--primary-color);
    }

    .rule-left {
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }
</style>
<div class="layuimini-container layuimini-page-anim">
    <div class="layuimini-main">




        <div class="section">
            <div class="solid ">
                <div class="layui-row">
                    <div class="layui-col-md3 solid-right">



                        <div class="title-row layuimini-title">
                            <div class="title-left">
                                <h4 style="height: 32px;line-height: 32px;"><span>预警规则</span></h4>
                            </div>
                            <div class="title-right">
                                <span class="title-right-text">

                                </span>
                            </div>
                        </div>




                        <!-- 列表区域 -->
                        <div class="y-scroll m-4" id="rule-list">

                        </div>

                    </div>
                    <div class="layui-col-md9">

                        <div class="page-create"></div>


                    </div>
                </div>
            </div>
        </div>




    </div>
</div>

<script>
    layui.use(['form', 'table', 'miniPage', 'element'], function () {
        var $ = layui.jquery,
            form = layui.form,
            table = layui.table,
            util = layui.util,
            element = layui.element,
            miniPage = layui.miniPage;


        let list = [
            {
                "id": "1830445346520739842",
                "name": "一人多机",
                "url": "page/workforce/attendanceConfig/components/personMachines.html",
                "status": 1
            },
            {
                "id": "1831865573484756994",
                "name": "离岗",
                "url": "page/workforce/attendanceConfig/components/leaving.html",
                "status": 1
            },
            {
                "id": "1831865638177701890",
                "name": "坐岗",
                "url": "page/workforce/attendanceConfig/components/sitting.html",
                "status": 1
            },

            {
                "id": 8,
                "name": "执法仪设置异常",
                "url": "page/workforce/attendanceConfig/components/deviceAbnormal.html",
                "status": 1
            }
        ]

        renderGridCheck(list)
        function renderGridCheck(data) {
            const container = $('#rule-list');
            container.empty(); // 清空旧元素
            data.forEach(item => {
                const checkboxId = `grid_${item.id}`;
                const checkboxHtml = `

                <div class="rule-item" id="${checkboxId}" data-url="${item.url}">
                                <span class="rule-left">${item.name}
                                    </span>
                                <span class="layui-font-green">启用中</span>
                            </div>

                            
                `;
                container.append(checkboxHtml);
                // 绑定点击事件
                $(`#${checkboxId}`).on('click', function () {
                    $(this).toggleClass('selected');
                    console.log()
                    const isSelected = $(this).hasClass('selected');
                    if (isSelected) {


                        var containerHtml = '.page-create';
                        $(containerHtml).html('');
                        var href = $(this).attr('data-url')
                        console.log(href)
                        $.ajax({
                            url: href,
                            type: 'get',
                            dataType: 'html',
                            success: function (data) {
                                $(containerHtml).html(data);
                                element.init();
                            },
                            error: function (xhr, textstatus, thrown) {
                                return layer.msg('Status:' + xhr.status + '，' + xhr.statusText + '，请稍后再试！');
                            }
                        });
                    } else {
                    }
                    // 单选模式：只保留当前选中项
                    if (!$(this).hasClass('multi-select')) {
                        $(`.rule-item`).not(this).removeClass('selected');

                    }
                });
            });


            // 自动点击第一个  根据实际逻辑进行处理
            if (data.length > 0) {
                const firstItemId = `#grid_${data[0].id}`;
                $(firstItemId).trigger('click');
            }


        }


    });
</script>